<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <title>audio.js</title>
    <meta content="width=device-width, initial-scale=0.6" name="viewport">
    <style>
        body { color: #666; font-family: sans-serif; line-height: 1.4; }
        h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
        h1 em { font-style: normal; color: #999; }
        a { color: #888; text-decoration: none; }
        #wrapper { width: 400px; margin: 40px auto; }

        ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
        ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
        ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
        li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
        li.playing a { color: #000; }
        li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }

        #shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
        #shortcuts div { width: 460px; margin: 0px auto; }
        #shortcuts h1 { margin: 0px 0px 6px; }
        #shortcuts p { margin: 0px 0px 18px; }
        #shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
            -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
            -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

        @media screen and (max-device-width: 480px) {
            #wrapper { position: relative; left: -3%; }
            #shortcuts { display: none; }
        }

        .credit {
            text-align: center;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.12.0/jquery.min.js"></script>
    <script src="./js/audio.js"></script>

</head>
<body>
<div id="wrapper">
    <h1>Bensound Royalty Free Tracks</h1>
    <audio preload autoplay="autoplay"></audio>
    <ol>
        <!--<li><a href="#" data-src="https://oss.v2url.com/2018/02/28/443b1b95ad74bc825d17385ef7703b5a.mp3">1</a></li>-->
        <!--<li><a href="#" data-src="https://oss.v2url.com/2018/02/28/e5edd139611fe9294ba20606c1827824.m4a">2</a></li>-->
        <!--<li><a href="#" data-src="http://play.maxrnb.cn/0306/9999999999/201504/Christina Perri - Human.mp3">3</a></li>-->
        <!--<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">4 Breeze</a></li>-->
        <!--<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">5</a></li>-->
        <!--<li><a href="#" data-src="http://play.maxrnb.cn/0306/9999999999/201504/Xonia - You and I.mp3">Funny Song</a></li>-->
        <!--<li><a href="#" data-src="http://play.maxrnb.cn/0306/9999999999/201504/Roshana - As I Am.mp3">Little Idea</a></li>-->
        <!--<li><a href="#" data-src="../mp3/bensound-betterdays.mp3">Better Days</a></li>-->
    </ol>
</div>
<div id="shortcuts" style="display: none">
    <div>
        <h1>Keyboard shortcuts:</h1>
        <p><em>&rarr;</em> Next track</p>
        <p><em>&larr;</em> Previous track</p>
        <p><em>Space</em> Play/pause</p>
    </div>
</div>

<p class="credit"><a href="http://www.bensound.com/royalty-free-music/">Royalty Free Music from Bensound</a></p>
<a href="https://github.com/lepig/maxrnb"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
</body>
<script>
   $(function() {
       // alert('a')
       $.ajax({
           type: "GET",
           url: "api.php",
           async: false, //先锁住浏览器，不然会加载另外的自执行方法
           success: function (json) {
               // alert('c')
               playList(json);

           }
       });
       function playList(data) {
           for (var i = 0, l = data.length; i < l; i++) {
               // console.log(data[i].url)
               var mp3url = data[i].url;
               var li = '<li><a href="#" data-src="' + mp3url + '">' +data[i].title+ ' - ' + data[i].singer + '</a></li>';
               // alert(li)
               $("ol").append(li)
           }
       }
   });
</script>
<script>
    $(function() {
        // alert('b')
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
            trackEnded: function() {
                var next = $('ol li.playing').next();
                if (!next.length) next = $('ol li').first();
                next.addClass('playing').siblings().removeClass('playing');
                audio.load($('a', next).attr('data-src'));
                audio.play();
            }
        });

        // Load in the first track
        var audio = a[0];
        first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);

        // Load in a track on click
        $('ol li').click(function(e) {
            e.preventDefault();
            $(this).addClass('playing').siblings().removeClass('playing');
            audio.load($('a', this).attr('data-src'));
            audio.play();
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
            var unicode = e.charCode ? e.charCode : e.keyCode;
            // right arrow
            if (unicode == 39) {
                var next = $('li.playing').next();
                if (!next.length) next = $('ol li').first();
                next.click();
                // back arrow
            } else if (unicode == 37) {
                var prev = $('li.playing').prev();
                if (!prev.length) prev = $('ol li').last();
                prev.click();
                // spacebar
            } else if (unicode == 32) {
                audio.playPause();
            }
        })
    });
</script>
</html>
